import { useState, useEffect, useMemo } from "react"
import style from "./tip.module.css"

 const Tip = ({ acceptData: { emojis, gameStart } }) => {
    // let [tip, setTip] = useState("")
    let [showTip, setShowTip] = useState(false)
    let [timeId, setTimeId] = useState("")
    let [showAnswer, setAnswer] = useState(false)

    const find = useMemo(() => {
        // 动态计算答案
        let answer
        emojis.some((v, i) => {
            if (emojis.indexOf(v) !== emojis.lastIndexOf(v)) {
                answer = v
                return true
            }
        })
        return answer
    }, [emojis])

    useEffect(() => {
        if (emojis.length !== 0 && gameStart === true) {
            setShowTip(false)
            setAnswer(false)
            setTimeId(setTimeout(() => {
                setShowTip(true)
            }, 5000))
        }
        return () => {
            clearTimeout(timeId)
            setTimeId("")
        }
    }, [emojis, gameStart])

    return (
        <>
            <div className={style.tip}
                style={{
                    visibility: showTip ? "visible" : "hidden"
                }}>
                <span onClick={() => setAnswer(true)} className={style.text}>tip</span>
                &nbsp;&nbsp;&nbsp;
                <span style={{
                    visibility: showAnswer ? "visible" : "hidden"
                }}>{find}</span>
            </div>
        </>
    )
}

export default Tip